<template>
  <yd-layout>
    <!-- <yd-cell-group class="cell-style">
        <yd-cell-item>
          <hd-svg-icon name="hd-sousuo" slot="left" size="35px" color="#8d8d8d"></hd-svg-icon>
          <yd-input slot="right" placeholder="搜索" v-model="search"></yd-input>
        </yd-cell-item>
    </yd-cell-group> -->
    <yd-search v-model="value1" :on-submit="submitHandler"></yd-search>
    <div v-for="item in outdata" :key="item.index" class="div2" @click="info(item.id,item.a,item.name_info)">
    <!-- <router-link :to="{path:'recommend',query:{id:id}}"> -->
      <img :src="item.image" alt="" srcset="" class="img-style">
    <!-- </router-link> -->
        <div class="div3">
          <div style="margin-left:5px;">
          <span class="span-font-style">{{item.name}}</span>
          </div>
          <!-- <div style="float:left">
            <yd-rate slot="left" v-model="item.star" size="15px" color="#FFA042" :readonly="true" ></yd-rate>
          </div>
          <div style="float:left">
            <span>15条评价</span>
          </div> -->
          <div class="inforight">
            <span>{{item.name_info}}</span>
          </div>
        </div>
        <!-- <div style="float:left">
          <yd-rate slot="left" v-model="rate" size="15px" color="#FFA042" :readonly="true" ></yd-rate>
        </div>
        <div style="float:left">
          <span>15条评价</span>
        </div> -->
      </div>
    </div>
  </yd-layout>
</template>
<script>
export default {
  name: 'buytypelist',
  data () {
    return {
      outdata: {},
      id: '',
      a: ''
    }
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.findTwoByUseList,
        data: {
          type: 'S',
          id: this.$route.query.id
        },
        success: (resultData) => {
          this.outdata = resultData.data.results;
          // this.indata = this.outdata.sublist;
          this.id = this.$route.query.id
          // this.a = resultData.data.params.a;
        }
      });
    },
    info(id, a, nameinfo) {
      if (this.a === 0) {
        this.hdAjax({
          url: this.API.findTwoByUseList,
          data: {
            type: 'S',
            id: id
          },
          success: (resultData) => {
            // console.log(resultData);
            this.outdata = resultData.data.results;
          }
        });
      } else {
        this.$router.push({path: '/buyplacelist', query: {id: id, name_info: nameinfo}})
      }
    }
  }
}
</script>
<style scope>
  .font-style{
    color:#ffffff;
    font-size:0.35rem;
  }
  /* .m-cell {
  background-color: #218B98;
  padding: 10px;
  margin-bottom: -10px;
}
.cell-item{
  height: 40px;
  padding: 0px;
  background-color: #fff;
  border-radius: 8px;
} */
/* .cell-right{
  min-height: 0px;
}
  .m-cell-box{
    margin-bottom: 0rem;
  }
  .search-style{
    border-radius: 10px;
  }
  .cell-style{
    padding: 10px;
    background-color: #009393;
  } */
  .div2{
    padding: 10px 30px 10px 30px;
  }
  .div3{
    border-bottom:	#ADADAD 1px solid;
    height: .9rem;
  }
  .img-style{
    height: 3.5rem;
    width: 100%;
  }
  .span-font-style{
    font-size:0.35rem;
    float: left;
  }
  /* .yd-input{
  width: 100%;
}
.yd-input input{
  width: 100%;
} */
.inforight{
  float: right;
  text-align: center;
  margin-top: 3px;
  width: 60%;
  font-size: 12px;
  line-height: 30px;
}
.search-icon{
  width: 9%;
}
.yd-search-input>.search-input{
  border-radius: 8px;
}
.yd-search-input{
  background-color: #218B98;
  font-size: .25rem;
}
  /* ::-moz-placeholder { font-size: 18px; }
  ::-webkit-input-placeholder { font-size:18px; }
   :-ms-input-placeholder { font-size:18px; } */

</style>